<template>
	<view class="order-goods-list">
		<!-- :style="is_same ? '' : 'background:#fdf1f1'" -->
		<view class="order-goods-item" v-for="(item,key) in goods_list">
			<!-- <view class="order-cover-box" :style="is_same ? 'background:#f2f2f2' : 'background:#fff'" v-if="!img_style">
				<image :src="item.goods_img" mode="widthFix" class="order-goods-cover"></image>
				<view class="shoes-tag" v-if="goods_list.length > 1">
					<text v-if="key == 0">左脚</text>
					<text v-if="key == 1">右脚</text>
				</view>
			</view> -->
			<!-- 左右脚背景色 :style="is_same ? 'background:#f2f2f2' : 'background:#fff'" -->
			<view class="order-cover-box">
				<view class="order-cover-box-temp">
					<img v-for="items in item.made_info[key]" :src="items.img" class="order-cover-position">
				</view>
				<view class="shoes-tag" v-if="goods_list.length > 1">
					<text v-if="key == 0">左脚</text>
					<text v-if="key == 1">右脚</text>
				</view>
			</view>
			<view class="order-goods-info">
				<view class="order-goods-name">{{item.goods_name}}</view>
				<view class="order-goods-no">款号:{{item.goods_no}}, 尺码:{{item.size}}</view>
				<view class="order-goods-price">
					<text class="order-real-price">￥{{item.goods_price}}</text>
					<!-- <text class="order-line-price">￥{{item.line_price}}</text> -->
					<view class="order-other">
						<text v-if="key == goods_list.length - 1 && !is_cart">x {{item.goods_num}}</text>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			goods_list: {},
			is_same: {},
			img_style: {},
			is_cart: {}
		},
		data() {
			return {}
		},
		mounted() {}
	}
</script>

<style lang="scss">
	.order-goods-list {
		width: calc(100% -40upx);
		padding: 0 20upx;
		padding-bottom: 10upx;
	}

	.order-goods-item {
		overflow: hidden;
		padding: 20upx 0;
	}

	.order-cover-box {
		float: left;
		width: 170upx;
		height: 170upx;
		background: #fefefe;
		border-radius: 10upx;
		position: relative;
	}

	.order-cover-box-temp {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.order-cover-position {
		position: absolute;
		height: 100%;
		top: 0;
		left: 0;
	}

	.order-goods-cover {
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 10upx;
	}

	.order-goods-info {
		float: left;
		width: calc(100% - 200upx);
		margin-left: 20upx;
		height: 170upx;
	}

	.order-goods-name {
		font-size: 32upx;
		color: #000000;
		height: 38upx;
		width: 380upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.order-goods-no {
		font-size: 24upx;
		padding: 10upx 0;
		color: #999999;
	}

	.order-real-price {
		font-size: 40upx;
		color: #000;
		font-weight: bold;
		font-family: 'OTF';
	}

	.order-line-price {
		font-size: 26upx;
		color: #c1c1c1;
		text-decoration: line-through;
		margin-left: 20upx;
		font-weight: bold;
	}

	.order-other {
		font-size: 24upx;
		color: #333333;
	}

	.order-other>text {
		font-size: 32upx;
		color: #333333;
	}

	.shoes-tag {
		position: absolute;
		z-index: 1;
		width: 60%;
		height: 30upx;
		text-align: center;
		line-height: 30upx;
		color: #fff;
		background: #000;
		bottom: 0;
		left: 20%;
		font-size: 24upx;
		border-radius: 5upx;
	}

	.order-goods-info {
		position: relative;

		.order-goods-price {
			position: absolute;
			width: 100%;
			bottom: 0;
			display: flex;
			justify-content: space-between;
		}
	}

	.order-goods-list {
		// border-top:  6upx solid #F9F9F9;
	}

	.order-goods-list:last-child {}
</style>